<template>
    <div class="card" style="margin-bottom: 10px;">
        <div class="cardbody">
            <div class="row">
                <div class=" shop col">用户列表</div>
            </div>
        </div>
    </div>


    <ConTent>

        <div class="card" style="background-color: lightgray;">
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        用户名
                    </div>
                    <div class="col">
                        邮箱
                    </div>
                    <div class="col">
                        电话
                    </div>
                    <div class="col">
                        地址
                    </div>
                    <div class="col">

                    </div>
                </div>

            </div>

        </div>

        <div v-for="user in $store.state.users " :key="user.id">

            <div v-if="user.username !== '管理员'" class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col">
                            <div class="selectuser" @click="gotochat(user.username)">{{ user.username }}</div>
                        </div>
                        <div class="col">
                            {{ user.email }}
                        </div>
                        <div class="col">
                            {{ user.phone }}
                        </div>
                        <div class="col">
                            {{ user.address }}
                        </div>

                        <div class="col">
                            <button @click="deleteuser(user.id)">删除</button>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </ConTent>
</template>

<script>
import { useStore } from 'vuex';
import router from '@/router/index';
import ConTent from '@/components/ConTent'
import $ from 'jquery';
export default {
    components: {
        ConTent,
    },

    setup() {
        let store = useStore();
        $.ajax({
            url: "http://8.134.248.229:10085/users/getinfo/",
            type: "get",
            headers: { Authorization: "Bearer " + store.state.token, },
            success(resp) {
                store.commit('updateuserinfo', resp);
            }
        })

        const deleteuser = (userid) => {
            for (let i in store.state.users) {
                if (store.state.users[i].id === userid) {
                    store.state.users.splice(i, 1);
                }
            }
            store.dispatch("deleteuser", userid);
        }

        const gotochat = (username) => {
            router.push({ name: 'connect', params: { username: username } });
        }

        return { deleteuser, gotochat };
    }
}
</script>

<style scoped>
.shop {
    display: flex;
    justify-content: center;
    align-items: center;
}

.selectuser:hover {
    color: red;
    cursor: pointer;
}
</style>